<template>
  <div class="wrap" :loading="loading">
    <div class="header">
      <el-radio
        v-for="user in userOptions"
        :key="user.id"
        v-model="currentUserId"
        :label="user.id"
        @change="changeUser"
        style="width: 150px"
      >{{user.account}}</el-radio>
    </div>
    <div class="content">
      <el-table
        :data="currentRow"
        border
        v-loading="tableLoading"
        style="width: 1000px"
        show-summary
      >
        <el-table-column
          prop="type"
          :label="$t('table.boxSize')"
          align="center"
        >
          <template slot-scope="{row}">
            <template v-if="row.boxType === 1">
              {{ $t('shipment.below150') }}
            </template>
            <template v-else-if="row.boxType === 2">
              {{ $t('shipment.above150') }}
            </template>
          </template>
        </el-table-column>
        <el-table-column
          prop="num"
          :label="$t('table.Inventory quantity')"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="afterNum"
          :label="$t('table.Updated inventory quantity')"
          align="center"
        >
          <template slot-scope="{row}">
            <el-input-number
              v-model="row.afterNum"
              :placeholder="$t('common.pleaseFillIn')"
              :min="0"
              :precision="0"
            ></el-input-number>
          </template>
        </el-table-column>

      </el-table>
      <div class="tips font-red" style="font-size: 12px">
        <div>{{ $t('shipment.updateShipmentText1') }}</div>
        <div>{{ $t('shipment.updateShipmentText2') }}</div>
      </div>
      <div class="mgt20">
        <el-button type="primary" :disabled="checkDisable()" @click="submitForm(currentUserId)" :loading="btnLoading">
          {{ $t('common.confirmModification') }}</el-button>
      </div>
      <div style="font-size: 12px">{{ $t('shipment.updateShipmentText3') }}</div>
    </div>
  </div>
</template>

<script>
import {getUserOptions} from "@/api/user";
import {deliverShipment, getUserShipment, saveUserShipment} from "@/api/shipment";
import {deepCopy} from "@/utils";

export default {
  name: "editUserShipment",
  data(){
    return {
      currentRow: [],
      originRow: [],
      currentUserId: '',
      beforeUserId: '',
      userOptions: [],
      loading: false,
      tableLoading: false,
      btnLoading: false,
    }
  },
  created() {
    this.getAllData()
  },
  methods: {
    async getAllData(){
      this.loading = true
      await getUserOptions()
        .then(res=>{
          this.loading = false
          this.userOptions = [];
          res.data.forEach( item =>{
            if(item.status !== 1){
              return;
            }
            this.userOptions.push({
              id: item.id,
              account: item.account,
            })
          })
        })

    },
    getData(){
      this.tableLoading = true
      getUserShipment(this.currentUserId)
        .then(res=>{
          this.tableLoading = false
          const obj = {
            boxType: 1,
            num: res.data.storageType1,
            afterNum: res.data.storageType1,
          }
          this.currentRow = [];
          this.currentRow.push(deepCopy(obj))

          obj.boxType = 2
          obj.num = res.data.storageType2
          obj.afterNum = res.data.storageType2
          this.currentRow.push(deepCopy(obj))

          this.originRow = deepCopy(this.currentRow)
        })
    },
    changeUser(){
      if(!this.checkDisable()){
        this.$alert(
          `<p><span style="color: #FF0000">当前用户数据尚未保存，是否保存？</span></p>`,
          '保存数据？',
          {
            dangerouslyUseHTMLString:true,
            // type:'warning',
            showCancelButton:true,
            confirmButtonText: '保存',
            cancelButtonText: '不保存'
          }
        )
          .then(res=>{
            this.submitForm(this.beforeUserId)
            this.getData()
            this.beforeUserId = this.currentUserId
          })
          .catch(res=>{
            this.getData()
            this.beforeUserId = this.currentUserId
          })
      }else{
        this.getData()
        this.beforeUserId = this.currentUserId
      }

    },
    checkDisable(){
      return JSON.stringify(this.currentRow) === JSON.stringify(this.originRow)
    },
    // 提交数据
    submitForm(userId = null){
      const postData = {
        userId: userId !== null ? userId : this.currentUserId,
        box: this.currentRow,
      };

      this.btnLoading = true
      saveUserShipment(postData)
        .then(res=>{
          this.btnLoading = false
          this.getData()
          this.$successMessage(res.message)
        })
    }
  }
}
</script>

<style scoped lang="scss">
.wrap {
  padding: 30px 30px;
  .header{
    //display: flex;
    //justify-content: space-between;
  }
  .content{
    padding: 20px 0 0;
  }
}
</style>
